<script setup lang="ts">
import { DictEnum } from '@vben/constants';

import { Descriptions, DescriptionsItem } from 'ant-design-vue';

import { renderDict } from '#/utils/render';

const detailInfo = defineModel('data', {
  type: Object,
  default: '',
});
</script>

<template>
  <Descriptions
    :column="3"
    size="small"
    :label-style="{ color: '#999' }"
    :content-style="{ color: '#333' }"
  >
    <DescriptionsItem label="产品名称" v-if="detailInfo">
      {{ detailInfo.productName }}
    </DescriptionsItem>
    <DescriptionsItem label="Productkey">
      {{ detailInfo.productKey }}
    </DescriptionsItem>
    <DescriptionsItem label="创建时间">
      {{ detailInfo && detailInfo.createTime }}
    </DescriptionsItem>

    <DescriptionsItem label="通信协议">
      <component
        :is="renderDict(detailInfo.protocol, DictEnum.IOT_PROTOCOL_TYPE)"
      />
    </DescriptionsItem>
    <DescriptionsItem label="安全类型" style="color: #666">
      <component
        style="color: #333"
        :is="renderDict(detailInfo.securityType, DictEnum.IOT_SECURITY_TYPE)"
      />
    </DescriptionsItem>
    <DescriptionsItem label="数据格式">
      <component
        :is="renderDict(detailInfo.dataType, DictEnum.IOT_DATA_TYPE)"
      />
    </DescriptionsItem>
    <DescriptionsItem label="连网方式">
      <component
        :is="renderDict(detailInfo.connectType, DictEnum.IOT_CONNECT_TYPE)"
      />
    </DescriptionsItem>
    <DescriptionsItem label="产品描述">
      {{ detailInfo && detailInfo.productDesc }}
    </DescriptionsItem>
  </Descriptions>
</template>
